<script setup lang="ts">
import { ref } from 'vue'
const active = ref(4);
const list1 = ref([{
    title: '申请人',
    status:'发起审批',
    time:'2023-08-28 15:41:23',
    userInfo:[{
        userName:'[00002]昂小V',
        userImg:'https://himg.bdimg.com/sys/portrait/item/public.1.bc8ddf93.4rujStCHo7LCug1exIIDwA.jpg'
    }],
    content:"aaaaaaaaaaaaaa"
}, {
    title: '横向上级',
    status:'通过',
    time:'2023-08-28 16:41:23',
    userInfo:[{
        userName:'[00003]昂小G',
        userImg:'https://himg.bdimg.com/sys/portrait/item/public.1.bc8ddf93.4rujStCHo7LCug1exIIDwA.jpg'
    }],
    content:"bbbbbbbbbbbbbbbbbbbb"
}, {
    title: '隔级横向上级',
    status:'驳回',
    time:'2023-08-28 17:41:23',
    userInfo:[{
        userName:'[00004]昂小M',
        userImg:'https://himg.bdimg.com/sys/portrait/item/public.1.bc8ddf93.4rujStCHo7LCug1exIIDwA.jpg'
    }],
    content:"ccccccccccccccccccccccc",
  titleColor:"red",
  nameColor:"blue",
	definedIcon:"icon-guanbi2",
	definedColor:"red"
}, {
    title: '后插审批人',
    status:'通过',
    time:'2023-08-28 18:41:23',
    userInfo:[{
        userName:'[00005]昂小Z',
        userImg:'https://himg.bdimg.com/sys/portrait/item/public.1.bc8ddf93.4rujStCHo7LCug1exIIDwA.jpg'
    }],
    content:"ddddddddddddddddddddd"
}, {
    title: '前插审批人',
    status:'待处理',
    time:'',
    userInfo:[{
        userName:'[00005]昂小Z',
        userImg:'https://himg.bdimg.com/sys/portrait/item/public.1.bc8ddf93.4rujStCHo7LCug1exIIDwA.jpg'
    }],
    content:""
}, {
    title: '总经理',
    status:'待处理',
    time:'',
    userInfo:[{
        userName:'[00005]昂小Z',
        userImg:'https://himg.bdimg.com/sys/portrait/item/public.1.bc8ddf93.4rujStCHo7LCug1exIIDwA.jpg'
    }],
    content:""
}, {
    title: '财务核对审核',
    status:'待处理',
    time:'',
  definedIcon:"icon-guanbi2",
    userInfo:[{
        userName:'[00005]昂小Z',
        userImg:'https://himg.bdimg.com/sys/portrait/item/public.1.bc8ddf93.4rujStCHo7LCug1exIIDwA.jpg'
    },{
        userName:'[00005]昂小Z',
        userImg:'https://himg.bdimg.com/sys/portrait/item/public.1.bc8ddf93.4rujStCHo7LCug1exIIDwA.jpg'
    },{
        userName:'[00005]昂小Z',
        userImg:'https://23233.png'
    },{
        userName:'[00005]昂小Z',
        userImg:''
    }],
    content:""
}])
const list2 = ref([{
    title: '2023-01-01',
    text:'第1次沟通',
    content:"aaaaaaaaaaaaaa沟通内容记录沟通内容记录沟通内容记录沟通内容记录沟通内容记录。"
}, {
    title: '2023-01-10',
    text:'第2次沟通',
    content:"bbbbbbbbbbbbbbbbb沟通内容记录沟通内容记录沟通内容记录沟通内容记录沟通内容记录。"
},{
    title: '2023-01-20',
    text:'第3次沟通',
    content:"cccccccccccccccc沟通内容记录沟通内容记录沟通内容记录沟通内容记录沟通内容记录。"
},{
    title: '2023-03-25',
    text:'第4次沟通',
    content:"ddddddddddddd沟通内容记录沟通内容记录沟通内容记录沟通内容记录沟通内容记录。"
},{
    title: '2023-05-30',
    text:'内部流程-意向合同',
    content:"eeeeeeeeee沟通内容记录沟通内容记录沟通内容记录沟通内容记录沟通内容记录。"
}])
const tabData = ref([{name:'审批模式'}, {name:'计划流程'}]);
const industryTabIndex = ref(0);
const themeColor = ref('#02B7E6');
const change = () => {
    if (active.value < list1.value.length - 1) {
        active.value += 1
    } else {
        active.value = 0
    }
}
const changeTheme = ()=>{
    if(themeColor.value==='#02B7E6'){
        themeColor.value='#FF6430'
    }
   else{
        themeColor.value='#02B7E6'
   }
}
const tabChange = (e:Event) => {
  industryTabIndex.value = e;
}
</script>

<route lang="json">{
    "style": {
        "navigationBarTitleText": "Steps"
    }
}</route>

<template>
    <view class="main">
        <view>
            <eui-tab :tabs="tabData" :value="industryTabIndex"
            @change="tabChange" ></eui-tab>
        </view>

        <eui-section title="审批模式" type="line" padding v-if="industryTabIndex===0">
            <eui-steps :options="list1"  :active="active" type="approve" activeTitleColor="pink" deactiveColor="orange" deactiveNameColor="purple">
                <template v-slot:content="scope" style="margin-top: 16rpx;" >
                    <view style="background: #F9FAFC; border-radius: 10rpx;margin-top: 16rpx;" v-if="scope.content">
                        <view style="padding: 20rpx; color: #666666;">{{ scope.content }}</view>
                    </view>

                </template>
                </eui-steps>
        </eui-section>
        <eui-section title="计划模式" type="line" padding v-else>
            <eui-button title="更新主题" @click="changeTheme"></eui-button>
            <eui-steps :options="list2"  :active="active" type="plan" :themeColor="themeColor" deactiveColor="red">
                <template v-slot:content="scope" style="margin-top: 16rpx;">
                    <view style="background: #F9FAFC; border-radius: 10rpx;margin-top: 16rpx;padding: 20rpx; " v-if="scope.content">
                        <view style="color: #666666;">{{ scope.content }}</view>
                        <view style="display: flex; margin-top: 20rpx;" v-if="scope.text==='第2次沟通'">
                            <eui-tag  text="已发图" plain plainFill></eui-tag>
                            <eui-tag  text="已发条件" plain plainFill></eui-tag>
                        </view>
                        <view style="display: flex; margin-top: 20rpx;" v-if="scope.text==='第3次沟通'">
                            <eui-tag  text="已看场" plain plainFill></eui-tag>
                        </view>
                        <view style="display: flex; margin-top: 20rpx;" v-if="scope.text==='第4次沟通'">
                            <eui-tag  text="意向确认" plain plainFill></eui-tag>
                            <eui-tag  text="已建档" plain plainFill></eui-tag>
                        </view>
                        <view style="display: flex;justify-content: space-around; margin-top: 20rpx;" v-if="scope.text==='第4次沟通'">
                            <image  mode="scaleToFill" style="width: 124rpx;height: 124rpx;border-radius: 10rpx;"
                            src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg"></image>
                            <image  mode="scaleToFill" style="width: 124rpx;height: 124rpx;border-radius: 10rpx;"
                            src="https://img1.baidu.com/it/u=1654174112,572219660&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500"></image>
                            <image  mode="scaleToFill" style="width: 124rpx;height: 124rpx;border-radius: 10rpx;"
                            src="https://img1.baidu.com/it/u=2150547443,771976727&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"></image>
                            <image  mode="scaleToFill" style="width: 124rpx;height: 124rpx;border-radius: 10rpx;"
                            src="https://img0.baidu.com/it/u=3312603872,2552024421&fm=253&fmt=auto&app=120&f=JPEG?w=972&h=547"></image>
                        </view>
                        <view style="display: flex; margin-top: 20rpx;" v-if="scope.text==='内部流程-意向合同'">
                            <eui-tag  text="意向合同流程完毕" plain plainFill></eui-tag>
                        </view>
                    </view>

                </template>
                </eui-steps>
        </eui-section>

    </view>

</template>

<style lang="scss">
@import '../../../../static/font/enjoyicon5.0/iconfont.css';
.main {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #fff;
}
</style>
